<script lang="ts" setup>
import { capsuleButtonHeight, safeAreaInsets } from '@/utils/systemInfo'

definePage({
  style: {
    navigationBarTitleText: '猫狗乐园壁纸详情',
    navigationStyle: 'custom',
  },
})

let petDetail = ref(null)
let maskFlag = ref(true)
let MsgPopup = ref(null)
function popOpen() {
  MsgPopup.value.open()
}
function closePopup() {
  MsgPopup.value.close()
}
async function downloadHandler() {
  // #ifdef H5

  uni.showModal({
    content: '长按保存壁纸',
    showCancel: false,
  })
  // #endif

  // #ifndef H5
  // loading效果

  uni.showLoading({
    title: '下载中...',
    mask: true,
  })

  uni.getImageInfo({
    src: petDetail.value.url,
    success: (success) => {
      uni.saveImageToPhotosAlbum({
        filePath: success.path,
        success: (success) => {
          uni.showToast({
            title: '保存成功',
          })
        },
        fail: (err) => {
          // 取消保存
          if (err.errMsg === 'saveImageToPhotosAlbum:fail cancel') {
            uni.showToast({
              title: '保存失败',
              icon: 'none',
            })
            return
          }
          // 重新授权
          uni.showModal({
            title: '提示',
            content: '需要授权保存相册',

            success: ({ confirm, cancel }) => {
              if (confirm) {
                uni.openSetting({
                  success: (setting) => {
                    if (setting.authSetting['scope.writePhotosAlbum']) {
                      uni.showToast({
                        title: '获取授权成功',
                      })
                    }
                    else {
                      uni.showToast({
                        title: '获取授权失败',
                      })
                    }
                  },
                })
              }
            },

          })
        },

      })
    },

  })

  // #endif
}
function goBackHandler() {
  uni.navigateBack({
    fail: () => {
      uni.reLaunch({
        url: '/pages/index/index',
      })
    },
  })
}
function goPet() {
  uni.navigateTo({ url: `/pages/pet/pet?type=${petDetail.value.type}`, fail: () => {
    uni.reLaunch({
      url: '/pages/index/index',
    })
  } })
}
onLoad(() => {
  petDetail.value = JSON.parse(uni.getStorageSync('wall')).petDetail
})
onUnload(() => {
})
</script>

<template>
  <view class="petDetail size-screen flex items-center justify-center">
    <uv-image :src="petDetail.url" width="100%" height="40vh" />
    <!-- 返回 -->
    <uv-button
      v-if="maskFlag" shape="circle" color="rgba(42, 37, 36,.5)" class="goBack absolute left-20px"
      :style="{ top: `${safeAreaInsets.top === 0 ? 20 : safeAreaInsets.top}px`, width: `${capsuleButtonHeight}px` }"
      @click="goBackHandler"
    >
      <uv-icon name="arrow-left" size="16" color="#fff" />
    </uv-button>
    <!-- 圆角信息盒子 -->
    <view v-if="maskFlag" class="info-box">
      <!-- 信息部分 -->
      <view class="info-item" @click="popOpen">
        <uv-icon name="info-circle" size="24" color="#333" />
        <text class="info-text">信息</text>
      </view>

      <!-- 下载部分 -->
      <!-- <view class="info-item" @click.stop="downloadHandler">
        <uv-icon name="download" size="24" color="#409EFF" />
        <text class="info-text">下载</text>
      </view> -->
    </view>
    <!-- 信息弹框 -->
    <uni-popup
      ref="MsgPopup" type="bottom" border-radius="10px 10px 0 0" background-color="#fff" animation is-mask-click
      safe-area
    >
      <view class="p-10px">
        <uv-row>
          <uv-col span="6" offset="1" text-align="right">
            <view class="title text-18px">
              壁纸信息
            </view>
          </uv-col>
          <uv-col span="1" offset="4" text-align="left">
            <uv-icon class="right-box" name="close" color="#eee" size="24" @click="closePopup" />
          </uv-col>
        </uv-row>
        <view class="content">
          <view> id:</view>
          <view> {{ petDetail._id }}</view>
          <view>来源:</view>
          <view>{{ petDetail.source }}</view>
          <view>
            类型:
          </view>
          <view class="color-green underline underline-green" @click="goPet">
            {{ petDetail.type }}
          </view>
          <view>作者:</view>
          <view>{{ petDetail.author }}</view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<style lang="scss" scoped>
//
.petDetail {
  .content {
    display: grid;
    margin-top: 20px;
    grid-template-columns: 50px 1fr;
    row-gap: 10px;
    column-gap: 5px;

    font-size: 18px;
    color: #4c4646;
    view:nth-child(odd) {
      text-align: right;
      color: #b3aeae;
    }
  }
  :deep(.uv-button-wrapper) {
    position: absolute !important;
  }
  .info-box {
    position: absolute;
    bottom: 10vh;
    // left: 10vw;
    // right: 10vw;
    display: flex;
    justify-content: space-between;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 40px;
    padding: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);

    .info-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 0 20px;
    }
  }
}
</style>
